<template>
  <el-card class="box-card">
    <template #header>
      <el-row type="flex" justify="end">
        <el-button
          type="primary"
          size="small"
          @click="addFn('0','1')"
        >添加权限</el-button>
      </el-row>
    </template>
    <el-table :data="permissionList" border style="width: 100%" row-key="id">
      <el-table-column label="权限名称" prop="title" />
      <el-table-column label="权限标识" prop="code" />
      <el-table-column label="权限描述" prop="description" />
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button v-if="row.pid === '0'" size="small" type="primary" @click="addFn(row.id,'2')">添加子权限</el-button>
          <el-button size="small" @click="editFn(row.id)">编辑</el-button>
          <el-button
            size="small"
            type="danger"
            @click="delFn(row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗组件放最下面 -->
    <addPermissionDialog
      ref="permissionDom"
      :dialog-visible.sync="showDialog"
      @updateEvent="initPermissionList"
    />

  </el-card>
</template>

<script>
// 引入弹窗组件
import addPermissionDialog from './components/addPermission-dialog.vue'
// 引入接口
// import { listToTree } from '@/utils/index'
import { getPermissionList, getPermissionCount, getPermissionDetail, delPermission } from '@/api/permission'
export default {
  components: { addPermissionDialog },
  data() {
    return {
      permissionList: [],
      // 所有权限的总数量用count接收
      count: 0,
      showDialog: false,
      start: 0,
      limit: 10

    }
  },
  async created() {
    this.initPermissionList()
  },
  methods: {
    // 渲染所有权限点封装的函数
    async initPermissionList() {
      // 获取总权限数量
      const result = await getPermissionCount()
      console.log('总权限数量', result)
      this.count = result.data
      const res = await getPermissionList({
        _limit: this.count,
        _start: this.start
      })
      console.log('获取到的权限点', res.data)
      this.permissionList = res.data
      // this.permissionList = await listToTree(this.permissionList, '0')
      // console.log('递归后的数据', this.permissionList)
      this.permissionList = this.listToTree(this.permissionList, '0')
    },
    // 点击新增显示弹窗
    addFn(pid, type) {
      this.showDialog = true
      this.$refs.permissionDom.permissionForm.pid = '' + pid
      this.$refs.permissionDom.permissionForm.type = type
    },
    // 点击编辑按钮显示弹窗并回填数据
    async editFn(id) {
      this.showDialog = true
      // 添加加载效果
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0,0,0,0.7)',
        body: true
      })
      // 调用接口获取当前权限详情
      const res = await getPermissionDetail(id)
      // console.log('拿到的当前权限详情', res)
      // 把后台返回的数据回显到输入框
      this.$refs.permissionDom.permissionForm = res.data
      // 请求结束，关闭加载效果
      loading.close()
    },
    // 删除功能
    delFn(id) {
      this.$confirm('是否删除该权限?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delPermission(id)
          // this.$message.success('删除成功！')
          // 重新渲染
          this.initPermissionList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 递归函数
    listToTree(arr, id) {
      const list = []
      arr.forEach(item => {
        // 一级部门
        if (item.pid === '' + id) {
          list.push(item)
          const res = this.listToTree(arr, item.id)
          // console.log(res)
          item.children = res
        }
      })
      return list
    }
  }
}

</script>

<style lang="scss">
.el-card {
  margin: 20px;
}
.el-loading-mask.is-fullscreen{
  z-index: 999999 !important;
}
.el-button{
  margin-left: 10px;
}
.el-pagination{
  margin-top: 20px;

}
</style>
